<!-- 登录 -->
<template>
  <div class="signinContainer">
    <div class="signiContent">
      <img class="logo" src="@/assets/logo.png" alt="" srcset="" />
      <div class="title">知玉斋</div>
      <div class="form">
        <van-form @submit="onSubmit">
          <van-field
            v-model="account"
            name="account"
            label=""
            error-message-align="center"
            left-icon="contact"
            placeholder="手机号"
            :rules="[{ required: true, message: '请填写手机号' }]"
          />
          <van-field
            v-model="password"
            type="password"
            name="password"
            label=""
            error-message-align="center"
            left-icon="bag-o"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
          <div style="margin: 16px">
            <van-button
              round
              block
              type="info"
              native-type="submit"
              color="#1FB470"
              class="button"
              >登 录</van-button
            >
          </div>
        </van-form>
      </div>
      <div class="retrieve" @click="retrieve">忘记密码</div>
    </div>
  </div>
</template>

<script>
import { getLogin } from "@/api/api.js";
import store from '../../../store'
export default {
  data() {
    return {
      account: "",
      password: "",
    };
  },
  methods: {
    onSubmit(values) {
      console.log("submit", values);
      getLogin(values).then((res) => {
        this.$toast.success(res.msg);
        console.log("登录回调---", res.data);
        localStorage.setItem("token", res.data.userinfo.token);
        localStorage.setItem("userInfo", JSON.stringify(res.data.userinfo));
        localStorage.setItem("userId", res.data.userinfo.id);
        store.commit('tokenFn', res.data.userinfo.token)
        store.commit('userIdFn', res.data.userinfo.id)
        setTimeout(() => {
          this.$router.push("/");
        }, 2000);
      });
    },
    retrieve() {
      this.$emit("operation", 2);
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  height: 100%;
  .signiContent {
    overflow: hidden;

    .logo {
      display: block;
      margin: 20% auto 10%;
      height: 80px;
    }

    .title {
      margin-top: 25px;
      letter-spacing: 2px;
      text-align: center;
      font-size: 2rem;
    }
    .form {
      width: 80%;
      margin: 10% auto 0;

      .van-cell {
        background-color: transparent;
        color: #fff;
        margin-top: 10px;
        min-height: 45px;
      }
      /deep/ .van-field__control {
        color: #fff;
        text-align: center;
      }
      .button {
        margin-top: 50px;
        color: #fff;
        font-size: 1em;
        border-radius: 5px;
      }
    }
    .retrieve {
      width: 100%;
      color: #fff;
      font-size: 0.5em;
      text-align: center;
      letter-spacing: 1px;
      // margin-top: 5px;
    }
  }
}
</style>